import styled from 'styled-components'
import { ChangeEvent, ReactNode, useMemo, useState } from 'react'
import { Button } from 'antd'
import Input from './Input'
import { useTranslation } from 'react-i18next'
import Controller from './Controller'
import { NavigationBarProps } from './NavigationBar'

const Container = styled(Controller)`
    background-color: ${prop => prop.theme.background.normal};
    position: absolute;
    width: 100%;
    height: 100%;
    overflow-y: auto;
`

const TextBox = styled.div`
    width: 100%;
    position: absolute;
    top: 6.4375rem;
    padding: 0 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
`

const TitleBox = styled.div`
    color: ${(prop) => prop.theme.login.title};
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.75rem;
`

const SubTitleBox = styled.div`
    color: ${(prop) => prop.theme.login.title};
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.75rem;
`

const TipsBox = styled.div`
    color: ${(prop) => prop.theme.text.gift};
    font-weight: 500;
    font-size: 1rem;
    height: 1.375rem;
    line-height: 1.375rem;
`

const Content = styled.div`
    background-color: ${prop => prop.theme.background.base};
    top: 12.8125rem;
    border-radius: 24px;
    left: 1.5rem;
    width: calc(100% - 3.0rem);
    bottom: 6.125rem;
    position: absolute;
    padding: 2.5rem 1.5rem;
    box-sizing: border-box;
    min-height: 31.25rem;
`

const InputBox = styled.div`
    width: 100%;
    >:not(:last-child) {
        margin-bottom: .5rem;
    }
`

const ButtonBox = styled(Button) <{ disable: number }>`
    margin-top: 3.75rem;
    background: linear-gradient(123deg, #FCA406 0%, #FA6A02 100%) !important;
    width: 100%;
    height: 3.125rem;
    border-radius: 1.5625rem;
    opacity: ${({ disable }) => disable ? 0.4 : 1};
    pointer-events: ${({ disable }) => disable ? 'none' : undefined};
    box-shadow: none !important;
`

const Footer = styled.div`
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
`

export interface Item {
    id: string;
    type: 'password' | 'text';
    maxLength?: number;
    required?: boolean;
    placeholder?: string;
    prefix?: ReactNode;
    suffix?: ReactNode
}

interface Props {
    list: Item[];
    button?: {
        title: string;
        type?: 'primary' | 'dashed' | 'link' | 'text' | 'default'
        onClick?: (values: { [key: string]: string }) => void;
    };
    onChange?: (values: { [key: string]: string }) => void;
    footer?: ReactNode;
    navigation?: NavigationBarProps;
    hiddenSafeBottom?: boolean;
}

const Background: React.FC<Props> = ({ list, button, footer, onChange, navigation, hiddenSafeBottom }) => {

    const { t } = useTranslation()
    const [values, setValues] = useState<{ [key: string]: string }>({})

    const onValueChange = (e: Item, event: ChangeEvent<HTMLInputElement>) => {
        const data = {
            ...values,
            [e.id]: event.currentTarget.value
        }
        setValues(data)
        onChange?.(data)
    }

    const requires = useMemo(() => {
        return list.filter(e => e.required).map(e => e.id)
    }, [list])

    const disabled: number = useMemo(() => {
        const idx = requires.findIndex(e => !values[e])
        return idx !== -1 ? 1 : 0
    }, [values, requires])


    return <Container
        // imagebackground={IconBackground}
        navigation={navigation}
        hiddenSafeBottom={hiddenSafeBottom}
    >
        <TextBox>
            <TitleBox>{t('common.hello')}</TitleBox>
            <SubTitleBox>{t('common.welcome')}</SubTitleBox>
            <TipsBox>{t('common.gift')}</TipsBox>
        </TextBox>
        <Content>
            <InputBox>
                {list.map((e) => {
                    return <Input
                        key={e.id}
                        size="huge"
                        placeholder={e.placeholder}
                        type={e.type}
                        onChange={(event) => onValueChange(e, event)}
                        suffix={e.suffix}
                        prefix={e.prefix}
                    />
                })}
            </InputBox>
            {button && <ButtonBox
                onClick={() => button.onClick?.(values)}
                type={button.type || 'primary'}
                disable={disabled}
            >{button.title}</ButtonBox>}
            {footer && <Footer>{footer}</Footer>}
        </Content>
    </Container>
}

export default Background